<template>
  <Header title="地址管理"/>
  <van-address-list
    :list="list"
    default-tag-text="默认"
    @add="onAdd"
    @edit="onEdit"
  />

</template>

<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import Header from '../../components/Header.vue'
export default {
  components: {
    Header
  },
  setup(){
    const store = useStore()
    const router = useRouter()
    let data = reactive({
      list:[]
    })

    // 初始化数据
    function init(){
      data.list = store.state.userAddress.map((item)=>{
        return{
          id:item.id,
          name:item.name,
          tel:item.tel,
          address:`${item.province}${item.city}${item.county}${item.addressDetail}`,
          isDefault:!!item.isDefault
        }
      })
    }
    onMounted(()=>{
      init()
    })

// 新增地址
    function onAdd(){
      router.push({
        path:"./addressedit",
        query:{
          type:'add',
        }
      })
    }
// 编辑地址的按钮
    function onEdit(item){
      router.push({
        path:"./addressedit",
        query:{
          id: item.id,
          type: 'change',
        }
      })
    }

    return{
      ...toRefs(data),
      onAdd,
      onEdit
    }
  }

}
</script>

<style lang="less" scoped>
/deep/ .van-button--danger{
  background-color: #ffc400;
  border-color: #ffc400;
}
/deep/ .van-switch--on{
  background-color: #ffc400;
}
/deep/ .van-radio__icon{
  display: none;
}
</style>